﻿<!-- <script lang="ts" setup name="qualityScheme">
import { ref, reactive, onMounted } from "vue";
import { auth } from '/@/utils/authFunction';
import { ElMessageBox, ElMessage } from "element-plus";
import { downloadStreamFile } from "/@/utils/download";
import { useQualitySchemeApi } from '/@/api/quality/qualityScheme';
import editDialog from '/@/views/quality/qualityScheme/component/editDialog.vue'
import printDialog from '/@/views/system/print/component/hiprint/preview.vue'
import ModifyRecord from '/@/components/table/modifyRecord.vue';
import ImportData from "/@/components/table/importData.vue";

const qualitySchemeApi = useQualitySchemeApi();
const printDialogRef = ref();
const editDialogRef = ref();
const importDataRef = ref();
const state = reactive({
  exportLoading: false,
  tableLoading: false,
  stores: {},
  showAdvanceQueryUI: false,
  dropdownData: {} as any,
  selectData: [] as any[],
  tableQueryParams: {} as any,
  tableParams: {
    page: 1,
    pageSize: 20,
    total: 0,
    field: 'createTime', // 默认的排序字段
    order: 'descending', // 排序方向
    descStr: 'descending', // 降序排序的关键字符
  },
  tableData: [],
});

// 页面加载时
onMounted(async () => {
});

// 查询操作
const handleQuery = async (params: any = {}) => {
  state.tableLoading = true;
  state.tableParams = Object.assign(state.tableParams, params);
  const result = await qualitySchemeApi.page(Object.assign(state.tableQueryParams, state.tableParams)).then(res => res.data.result);
  state.tableParams.total = result?.total;
  state.tableData = result?.items ?? [];
  state.tableLoading = false;
};

// 列排序
const sortChange = async (column: any) => {
  state.tableParams.field = column.prop;
  state.tableParams.order = column.order;
  await handleQuery();
};

// 删除
const delQualityScheme = (row: any) => {
  ElMessageBox.confirm(`确定要删除吗?`, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    await qualitySchemeApi.delete({ id: row.id });
    handleQuery();
    ElMessage.success("删除成功");
  }).catch(() => {});
};

// 批量删除
const batchDelQualityScheme = () => {
  ElMessageBox.confirm(`确定要删除${state.selectData.length}条记录吗?`, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    await qualitySchemeApi.batchDelete(state.selectData.map(u => ({ id: u.id }) )).then(res => {
      ElMessage.success(`成功批量删除${res.data.result}条记录`);
      handleQuery();
    });
  }).catch(() => {});
};

// 导出数据
const exportQualitySchemeCommand = async (command: string) => {
  try {
    state.exportLoading = true;
    if (command === 'select') {
      const params = Object.assign({}, state.tableQueryParams, state.tableParams, { selectKeyList: state.selectData.map(u => u.id) });
      await qualitySchemeApi.exportData(params).then(res => downloadStreamFile(res));
    } else if (command === 'current') {
      const params = Object.assign({}, state.tableQueryParams, state.tableParams);
      await qualitySchemeApi.exportData(params).then(res => downloadStreamFile(res));
    } else if (command === 'all') {
      const params = Object.assign({}, state.tableQueryParams, state.tableParams, { page: 1, pageSize: 99999999 });
      await qualitySchemeApi.exportData(params).then(res => downloadStreamFile(res));
    }
  } finally {
    state.exportLoading = false;
  }
}

handleQuery();
</script>
<template>
  <div class="qualityScheme-container" v-loading="state.exportLoading">
    <el-card shadow="hover" :body-style="{ paddingBottom: '0' }"> 
      <el-form :model="state.tableQueryParams" ref="queryForm" labelWidth="90">
        <el-row>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10">
            <el-form-item label="关键字">
              <el-input v-model="state.tableQueryParams.keyword" clearable placeholder="请输入模糊查询关键字"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="state.showAdvanceQueryUI">
            <el-form-item label="方案编码">
              <el-input v-model="state.tableQueryParams.schemeCode" clearable placeholder="请输入方案编码"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="state.showAdvanceQueryUI">
            <el-form-item label="方案名称">
              <el-input v-model="state.tableQueryParams.schemeName" clearable placeholder="请输入方案名称"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="state.showAdvanceQueryUI">
            <el-form-item label="当前版本号">
              <el-input v-model="state.tableQueryParams.schemeVersion" clearable placeholder="请输入当前版本号"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="state.showAdvanceQueryUI">
            <el-form-item label="备注">
              <el-input v-model="state.tableQueryParams.remark" clearable placeholder="请输入备注"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10">
            <el-form-item >
              <el-button-group style="display: flex; align-items: center;">
                <el-button type="primary"  icon="ele-Search" @click="handleQuery" v-auth="'qualityScheme:page'" v-reclick="1000"> 查询 </el-button>
                <el-button icon="ele-Refresh" @click="() => state.tableQueryParams = {}"> 重置 </el-button>
                <el-button icon="ele-ZoomIn" @click="() => state.showAdvanceQueryUI = true" v-if="!state.showAdvanceQueryUI" style="margin-left:5px;"> 高级查询 </el-button>
                <el-button icon="ele-ZoomOut" @click="() => state.showAdvanceQueryUI = false" v-if="state.showAdvanceQueryUI" style="margin-left:5px;"> 隐藏 </el-button>
                <el-button type="danger" style="margin-left:5px;" icon="ele-Delete" @click="batchDelQualityScheme" :disabled="state.selectData.length == 0" v-auth="'qualityScheme:batchDelete'"> 删除 </el-button>
                <el-button type="primary" style="margin-left:5px;" icon="ele-Plus" @click="editDialogRef.openDialog(null, '新增检验方案')" v-auth="'qualityScheme:add'"> 新增 </el-button>
                <el-dropdown :show-timeout="70" :hide-timeout="50" @command="exportQualitySchemeCommand">
                  <el-button type="primary" style="margin-left:5px;" icon="ele-FolderOpened" v-reclick="20000" v-auth="'qualityScheme:export'"> 导出 </el-button>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item command="select" :disabled="state.selectData.length == 0">导出选中</el-dropdown-item>
                      <el-dropdown-item command="current">导出本页</el-dropdown-item>
                      <el-dropdown-item command="all">导出全部</el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
                <el-button type="warning" style="margin-left:5px;" icon="ele-MostlyCloudy" @click="importDataRef.openDialog()" v-auth="'qualityScheme:import'"> 导入 </el-button>
              </el-button-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card class="full-table" shadow="hover" style="margin-top: 5px">
      <el-table :data="state.tableData" @selection-change="(val: any[]) => { state.selectData = val; }" style="width: 100%" v-loading="state.tableLoading" tooltip-effect="light" row-key="id" @sort-change="sortChange" border>
        <el-table-column type="selection" width="40" align="center" v-if="auth('qualityScheme:batchDelete') || auth('qualityScheme:export')" />
        <el-table-column type="index" label="序号" width="55" align="center"/>
        <el-table-column prop='schemeCode' label='方案编码' show-overflow-tooltip />
        <el-table-column prop='schemeName' label='方案名称' show-overflow-tooltip />
        <el-table-column prop='schemeVersion' label='当前版本号' show-overflow-tooltip />
        <el-table-column prop='remark' label='备注' show-overflow-tooltip />
        <el-table-column label="修改记录" width="100" align="center" show-overflow-tooltip>
          <template #default="scope">
            <ModifyRecord :data="scope.row" />
          </template>
        </el-table-column>
        <el-table-column label="操作" width="140" align="center" fixed="right" show-overflow-tooltip v-if="auth('qualityScheme:update') || auth('qualityScheme:delete')">
          <template #default="scope">
            <el-button icon="ele-Edit" size="small" text type="primary" @click="editDialogRef.openDialog(scope.row, '编辑检验方案')" v-auth="'qualityScheme:update'"> 编辑 </el-button>
            <el-button icon="ele-Delete" size="small" text type="primary" @click="delQualityScheme(scope.row)" v-auth="'qualityScheme:delete'"> 删除 </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination 
              v-model:currentPage="state.tableParams.page"
              v-model:page-size="state.tableParams.pageSize"
              @size-change="(val: any) => handleQuery({ pageSize: val })"
              @current-change="(val: any) => handleQuery({ page: val })"
              layout="total, sizes, prev, pager, next, jumper"
              :page-sizes="[10, 20, 50, 100, 200, 500]"
              :total="state.tableParams.total"
              size="small"
              background />
      <ImportData ref="importDataRef" :import="qualitySchemeApi.importData" :download="qualitySchemeApi.downloadTemplate" v-auth="'qualityScheme:import'" @refresh="handleQuery"/>
      <printDialog ref="printDialogRef" :title="'打印检验方案'" @reloadTable="handleQuery" />
      <editDialog ref="editDialogRef" @reloadTable="handleQuery" />
    </el-card>
  </div>
</template>
<style scoped>
:deep(.el-input), :deep(.el-select), :deep(.el-input-number) {
  width: 100%;
}
</style> -->




<script lang="ts" setup name="qualitySchemeWithItems">
import { ref, reactive, onMounted } from "vue";
import { auth } from '/@/utils/authFunction';
import { ElMessageBox, ElMessage } from "element-plus";
import { downloadStreamFile } from "/@/utils/download";
import { useQualitySchemeApi } from '/@/api/quality/qualityScheme';
import { useQualityItemsApi } from '/@/api/quality/qualityItems';
import editDialog from '/@/views/quality/qualityScheme/component/editDialog.vue'
import editItemsDialog from '/@/views/quality/qualityItems/component/editDialog.vue'
import printDialog from '/@/views/system/print/component/hiprint/preview.vue'
import ModifyRecord from '/@/components/table/modifyRecord.vue';
import ImportData from "/@/components/table/importData.vue";


const qualitySchemeApi = useQualitySchemeApi();
const qualityItemsApi = useQualityItemsApi();
const printDialogRef = ref();
const editDialogRef = ref();
const editItemsDialogRef = ref();
const importDataRef = ref();


const state = reactive({
  exportLoading: false,
  tableLoading: false,
  itemsTableLoading: false,
  showAdvanceQueryUI: false,
  showItemsAdvanceQueryUI: false,
  selectData: [] as any[],
  selectItemsData: [] as any[],
  tableQueryParams: {} as any,
  itemsTableQueryParams: {} as any,
  tableParams: {
    page: 1,
    pageSize: 20,
    total: 0,
    field: 'createTime',
    order: 'descending',
  },
  itemsTableParams: {
    page: 1,
    pageSize: 20,
    total: 0,
    field: 'createTime',
    order: 'descending',
  },
  tableData: [] as any[],
  itemsTableData: [] as any[],
  currentScheme: null as any, // 当前选中的检验方案
});

// 页面加载时
onMounted(async () => {
  await handleQuery();
});

// 查询主表
const handleQuery = async (params: any = {}) => {
  state.tableLoading = true;
  state.tableParams = Object.assign(state.tableParams, params);
  const result = await qualitySchemeApi.page(Object.assign(state.tableQueryParams, state.tableParams)).then(res => res.data.result);
  state.tableParams.total = result?.total;
  state.tableData = result?.items ?? [];
  state.tableLoading = false;
  
  // 默认选中第一条
  if (state.tableData.length > 0) {
    handleSchemeSelect(state.tableData[0]);
  } else {
    state.itemsTableData = [];
    state.currentScheme = null;
  }
};

// 查询明细表
const handleItemsQuery = async (params: any = {}) => {
  if (!state.currentScheme) return;
  
  state.itemsTableLoading = true;
  state.itemsTableParams = Object.assign(state.itemsTableParams, params);
  
  // 添加关联的主表ID
  const queryParams = Object.assign({ qualitySchemeId: state.currentScheme.id }, state.itemsTableQueryParams, state.itemsTableParams);
  
  const result = await qualityItemsApi.page(queryParams).then(res => res.data.result);
  state.itemsTableParams.total = result?.total;
  state.itemsTableData = result?.items ?? [];
  state.itemsTableLoading = false;
};

// 选择主表记录
const handleSchemeSelect = (row: any) => {
  state.currentScheme = row;
  state.itemsTableQueryParams = {}; // 重置明细查询条件
  handleItemsQuery();
};

// 主表排序
const sortChange = async (column: any) => {
  state.tableParams.field = column.prop;
  state.tableParams.order = column.order;
  await handleQuery();
};

// 明细表排序
const sortItemsChange = async (column: any) => {
  state.itemsTableParams.field = column.prop;
  state.itemsTableParams.order = column.order;
  await handleItemsQuery();
};

// 删除主表
const delQualityScheme = (row: any) => {
  ElMessageBox.confirm(`确定要删除该检验方案及其所有明细项吗?`, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    await qualitySchemeApi.delete({ id: row.id });
    handleQuery();
    ElMessage.success("删除成功");
  }).catch(() => {});
};

// 批量删除主表
const batchDelQualityScheme = () => {
  ElMessageBox.confirm(`确定要删除${state.selectData.length}条检验方案及其所有明细项吗?`, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    await qualitySchemeApi.batchDelete(state.selectData.map(u => ({ id: u.id }))).then(res => {
      ElMessage.success(`成功批量删除${res.data.result}条记录`);
      handleQuery();
    });
  }).catch(() => {});
};

// 删除明细项
const delQualityItems = (row: any) => {
  ElMessageBox.confirm(`确定要删除该检验项吗?`, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    await qualityItemsApi.delete({ id: row.id });
    handleItemsQuery();
    ElMessage.success("删除成功");
  }).catch(() => {});
};

// 批量删除明细项
const batchDelQualityItems = () => {
  ElMessageBox.confirm(`确定要删除${state.selectItemsData.length}条检验项吗?`, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    await qualityItemsApi.batchDelete(state.selectItemsData.map(u => ({ id: u.id }))).then(res => {
      ElMessage.success(`成功批量删除${res.data.result}条记录`);
      handleItemsQuery();
    });
  }).catch(() => {});
};

// 导出主表数据
const exportQualitySchemeCommand = async (command: string) => {
  try {
    state.exportLoading = true;
    if (command === 'select') {
      const params = Object.assign({}, state.tableQueryParams, state.tableParams, { selectKeyList: state.selectData.map(u => u.id) });
      await qualitySchemeApi.exportData(params).then(res => downloadStreamFile(res));
    } else if (command === 'current') {
      const params = Object.assign({}, state.tableQueryParams, state.tableParams);
      await qualitySchemeApi.exportData(params).then(res => downloadStreamFile(res));
    } else if (command === 'all') {
      const params = Object.assign({}, state.tableQueryParams, state.tableParams, { page: 1, pageSize: 99999999 });
      await qualitySchemeApi.exportData(params).then(res => downloadStreamFile(res));
    }
  } finally {
    state.exportLoading = false;
  }
};

// 导出明细表数据
const exportQualityItemsCommand = async (command: string) => {
  if (!state.currentScheme) {
    ElMessage.warning("请先选择一条检验方案");
    return;
  }

  try {
    state.exportLoading = true;
    if (command === 'select') {
      const params = Object.assign({}, state.itemsTableQueryParams, state.itemsTableParams, { 
        selectKeyList: state.selectItemsData.map(u => u.id),
        qualitySchemeId: state.currentScheme.id
      });
      await qualityItemsApi.exportData(params).then(res => downloadStreamFile(res));
    } else if (command === 'current') {
      const params = Object.assign({}, state.itemsTableQueryParams, state.itemsTableParams, { 
        qualitySchemeId: state.currentScheme.id
      });
      await qualityItemsApi.exportData(params).then(res => downloadStreamFile(res));
    } else if (command === 'all') {
      const params = Object.assign({}, state.itemsTableQueryParams, { 
        page: 1, 
        pageSize: 99999999,
        qualitySchemeId: state.currentScheme.id
      });
      await qualityItemsApi.exportData(params).then(res => downloadStreamFile(res));
    }
  } finally {
    state.exportLoading = false;
  }
};

// 新增明细项
const addQualityItem = () => {
  if (!state.currentScheme) {
    ElMessage.warning("请先选择一条检验方案");
    return;
  }
  editItemsDialogRef.value.openDialog({ qualitySchemeId: state.currentScheme.id }, '新增检验项');
};
</script>

<template>
  <div class="quality-container" v-loading="state.exportLoading">
    <!-- 主表查询条件 -->
    <el-card shadow="hover" :body-style="{ paddingBottom: '0' }"> 
      <el-form :model="state.tableQueryParams" ref="queryForm" labelWidth="90">
        <el-row>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10">
            <el-form-item label="关键字">
              <el-input v-model="state.tableQueryParams.keyword" clearable placeholder="请输入模糊查询关键字"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="state.showAdvanceQueryUI">
            <el-form-item label="方案编码">
              <el-input v-model="state.tableQueryParams.schemeCode" clearable placeholder="请输入方案编码"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="state.showAdvanceQueryUI">
            <el-form-item label="方案名称">
              <el-input v-model="state.tableQueryParams.schemeName" clearable placeholder="请输入方案名称"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="state.showAdvanceQueryUI">
            <el-form-item label="当前版本号">
              <el-input v-model="state.tableQueryParams.schemeVersion" clearable placeholder="请输入当前版本号"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="state.showAdvanceQueryUI">
            <el-form-item label="备注">
              <el-input v-model="state.tableQueryParams.remark" clearable placeholder="请输入备注"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10">
            <el-form-item >
              <el-button-group style="display: flex; align-items: center;">
                <el-button type="primary" icon="ele-Search" @click="handleQuery" v-auth="'qualityScheme:page'"> 查询 </el-button>
                <el-button icon="ele-Refresh" @click="() => { state.tableQueryParams = {}; handleQuery(); }"> 重置 </el-button>
                <el-button icon="ele-ZoomIn" @click="() => state.showAdvanceQueryUI = true" v-if="!state.showAdvanceQueryUI"> 高级查询 </el-button>
                <el-button icon="ele-ZoomOut" @click="() => state.showAdvanceQueryUI = false" v-if="state.showAdvanceQueryUI"> 隐藏 </el-button>
                <!-- <el-button type="danger" icon="ele-Delete" @click="batchDelQualityScheme" :disabled="state.selectData.length == 0" v-auth="'qualityScheme:batchDelete'"> 删除 </el-button> -->
                <el-button type="primary" icon="ele-Plus" @click="editDialogRef.openDialog(null, '新增检验方案')" v-auth="'qualityScheme:add'"> 新增 </el-button>
                <!-- <el-dropdown @command="exportQualitySchemeCommand">
                  <el-button type="primary" icon="ele-FolderOpened" v-auth="'qualityScheme:export'"> 导出 </el-button>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item command="select" :disabled="state.selectData.length == 0">导出选中</el-dropdown-item>
                      <el-dropdown-item command="current">导出本页</el-dropdown-item>
                      <el-dropdown-item command="all">导出全部</el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown> -->
                <!-- <el-button type="warning" icon="ele-MostlyCloudy" @click="importDataRef.openDialog()" v-auth="'qualityScheme:import'"> 导入 </el-button> -->
              </el-button-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    
    <!-- 主从表布局 -->
    <div class="main-detail-layout">
      <!-- 主表 -->
      <div class="main-table">
        <el-card class="full-table" shadow="hover" style="margin-top: 5px">
          <el-table 
            :data="state.tableData" 
            @selection-change="(val: any[]) => state.selectData = val" 
            @row-click="handleSchemeSelect"
            highlight-current-row
            style="width: 100%" 
            v-loading="state.tableLoading" 
            row-key="id" 
            @sort-change="sortChange" 
            border>
            <!-- <el-table-column type="selection" width="40" align="center" v-if="auth('qualityScheme:batchDelete') || auth('qualityScheme:export')" /> -->
            <el-table-column type="index" label="序号" width="55" align="center" v-if="auth('qualityScheme:batchDelete') || auth('qualityScheme:export')" />
            <!-- <el-table-column type="index" label="序号" width="55" align="center"/> -->
            <el-table-column prop="schemeCode" label="方案编码" show-overflow-tooltip />
            <el-table-column prop="schemeName" label="方案名称" show-overflow-tooltip />
            <!-- <el-table-column prop="schemeVersion" label="当前版本号" show-overflow-tooltip /> -->
            <el-table-column prop="remark" label="备注" show-overflow-tooltip />
            <!-- <el-table-column label="修改记录" width="100" align="center" show-overflow-tooltip>
              <template #default="scope">
                <ModifyRecord :data="scope.row" />
              </template>
            </el-table-column> -->
            <el-table-column label="操作" width="240" align="center" fixed="right" show-overflow-tooltip v-if="auth('qualityScheme:update') || auth('qualityScheme:delete')">
              <template #default="scope">
                <el-button icon="ele-Edit" size="small" text type="primary" @click="editDialogRef.openDialog(scope.row, '编辑检验方案')" v-auth="'qualityScheme:update'"> 编辑 </el-button>
                <el-button text type="primary" icon="ele-Plus" @click="addQualityItem" v-auth="'qualityItems:add'"> 新增检验项 </el-button>
           
                <el-button icon="ele-Delete" size="small" text type="primary" @click="delQualityScheme(scope.row)" v-auth="'qualityScheme:delete'"> 删除 </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination 
            v-model:currentPage="state.tableParams.page"
            v-model:page-size="state.tableParams.pageSize"
            @size-change="(val: any[]) => handleQuery({ pageSize: val })"
            @current-change="(val: any[]) => handleQuery({ page: val })"
            layout="total, sizes, prev, pager, next, jumper"
            :page-sizes="[10, 20, 50, 100, 200, 500]"
            :total="state.tableParams.total"
            size="small"
            background />
        </el-card>
      </div>
      
      <!-- 明细表 -->
      <div class="detail-table">
        <!-- <el-card shadow="hover" :body-style="{ paddingBottom: '0' }" v-if="state.currentScheme">
          <el-form :model="state.itemsTableQueryParams" labelWidth="90">
            <el-row>
              <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6" class="mb10">
                <el-form-item label="关键字">
                  <el-input v-model="state.itemsTableQueryParams.keyword" clearable placeholder="请输入模糊查询关键字" @keyup.enter="handleItemsQuery"/>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6" class="mb10" v-if="state.showItemsAdvanceQueryUI">
                <el-form-item label="检验项编码">
                  <el-input v-model="state.itemsTableQueryParams.itemCode" clearable placeholder="请输入检验项编码"/>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6" class="mb10" v-if="state.showItemsAdvanceQueryUI">
                <el-form-item label="检验项名称">
                  <el-input v-model="state.itemsTableQueryParams.itemName" clearable placeholder="请输入检验项名称"/>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6" class="mb10">
                <el-form-item>
                  <el-button-group style="display: flex; align-items: center;">
                    <el-button type="primary" icon="ele-Search" @click="handleItemsQuery" v-auth="'qualityItems:page'"> 查询 </el-button>
                    <el-button icon="ele-Refresh" @click="() => { state.itemsTableQueryParams = {}; handleItemsQuery(); }"> 重置 </el-button>
                    <el-button icon="ele-ZoomIn" @click="() => state.showItemsAdvanceQueryUI = true" v-if="!state.showItemsAdvanceQueryUI"> 高级查询 </el-button>
                    <el-button icon="ele-ZoomOut" @click="() => state.showItemsAdvanceQueryUI = false" v-if="state.showItemsAdvanceQueryUI"> 隐藏 </el-button>
                    <el-button type="danger" icon="ele-Delete" @click="batchDelQualityItems" :disabled="state.selectItemsData.length == 0" v-auth="'qualityItems:batchDelete'"> 删除 </el-button>
                    <el-button type="primary" icon="ele-Plus" @click="addQualityItem" v-auth="'qualityItems:add'"> 新增 </el-button>
                    <el-dropdown @command="exportQualityItemsCommand">
                      <el-button type="primary" icon="ele-FolderOpened" v-auth="'qualityItems:export'"> 导出 </el-button>
                      <template #dropdown>
                        <el-dropdown-menu>
                          <el-dropdown-item command="select" :disabled="state.selectItemsData.length == 0">导出选中</el-dropdown-item>
                          <el-dropdown-item command="current">导出本页</el-dropdown-item>
                          <el-dropdown-item command="all">导出全部</el-dropdown-item>
                        </el-dropdown-menu>
                      </template>
                    </el-dropdown>
                  </el-button-group>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
         -->
        <el-card class="full-table" shadow="hover" style="margin-top: 5px" v-if="state.currentScheme">
          <div class="detail-title">
            <h4>{{ state.currentScheme.schemeName }}的检验项</h4>
          </div>
          <el-table 
            :data="state.itemsTableData" 
            @selection-change="(val: any[]) => state.selectItemsData = val" 
            style="width: 100%" 
            v-loading="state.itemsTableLoading" 
            row-key="id" 
            @sort-change="sortItemsChange" 
            border>
            <!-- <el-table-column type="selection" width="40" align="center" v-if="auth('qualityItems:batchDelete') || auth('qualityItems:export')" /> -->
            <el-table-column type="index" label="序号" width="55" align="center" v-if="auth('qualityItems:batchDelete') || auth('qualityItems:export')" />
            <!-- <el-table-column type="index" label="序号" width="55" align="center"/> -->
            <el-table-column prop="itemCode" label="检验项编码" show-overflow-tooltip />
            <el-table-column prop="itemName" label="检验项名称" show-overflow-tooltip />
            <el-table-column prop="standardValue" label="检验标准" show-overflow-tooltip />
            <!-- <el-table-column prop="productCode" label="关联物料编码" show-overflow-tooltip />
            <el-table-column prop="productName" label="关联物料名称" show-overflow-tooltip /> -->
            <!-- <el-table-column label="修改记录" width="100" align="center" show-overflow-tooltip>
              <template #default="scope">
                <ModifyRecord :data="scope.row" />
              </template>
            </el-table-column> -->
            <el-table-column label="操作" width="140" align="center" fixed="right" show-overflow-tooltip v-if="auth('qualityItems:update') || auth('qualityItems:delete')">
              <template #default="scope">
                <el-button icon="ele-Edit" size="small" text type="primary" @click="editItemsDialogRef.openDialog(scope.row, '编辑检验项')" v-auth="'qualityItems:update'"> 编辑 </el-button>
                <el-button icon="ele-Delete" size="small" text type="primary" @click="delQualityItems(scope.row)" v-auth="'qualityItems:delete'"> 删除 </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination 
            v-model:currentPage="state.itemsTableParams.page"
            v-model:page-size="state.itemsTableParams.pageSize"
            @size-change="(val: any[]) => handleItemsQuery({ pageSize: val })"
            @current-change="(val: any[]) => handleItemsQuery({ page: val })"
            layout="total, sizes, prev, pager, next, jumper"
            :page-sizes="[10, 20, 50, 100, 200, 500]"
            :total="state.itemsTableParams.total"
            size="small"
            background />
        </el-card>
        
        <el-card shadow="hover" style="margin-top: 5px" v-else>
          <el-empty description="请从左侧选择一条检验方案以查看其明细" />
        </el-card>
      </div>
    </div>
    
    <ImportData ref="importDataRef" :import="qualitySchemeApi.importData" :download="qualitySchemeApi.downloadTemplate" v-auth="'qualityScheme:import'" @refresh="handleQuery"/>
    <printDialog ref="printDialogRef" :title="'打印检验方案'" @reloadTable="handleQuery" />
    <editDialog ref="editDialogRef" @reloadTable="handleQuery" />
    <editItemsDialog ref="editItemsDialogRef" @reloadTable="handleItemsQuery" />
  </div>
</template>

<style scoped>
:deep(.el-input), :deep(.el-select), :deep(.el-input-number) {
  width: 100%;
}

.quality-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.main-detail-layout {
  flex: 1;
  display: flex;
  margin-top: 5px;
  gap: 10px;
  min-height: 0;
}

.main-table {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.detail-table {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.full-table {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.detail-title {
  margin-bottom: 15px;
  text-align: center;
  color: #666;
}
</style>